<script setup lang="ts">
import { useGlobalStore } from '@/stores'

const globalStore = useGlobalStore()
</script>

<template>
  <el-main class="main-box relative">
    <el-scrollbar>
      <router-view v-slot="{ Component, route }">
        <transition :name="globalStore.animationName" mode="out-in">
          <div v-if="Component" :key="route.fullPath">
            <component :is="Component" />
          </div>
        </transition>
      </router-view>
    </el-scrollbar>
  </el-main>
</template>

<style scoped lang="scss">
.el-main {
  font-size: 12px !important;
  padding: 10px;
  height: calc(100vh - 68px);
  background-color: #f7fafcc7;
}
.el-footer {
  height: auto;
  padding: 0;
}
</style>
